前端学习圈

jq-03 属性、位置

一、属性操作

  • .attr(); 传一个参数为获取，两个为设置；
  • removeAttr()； 删除属性；
  • .prop()；传一个为获取，两个为设置；
  • removeProp()；删除属性；

如果需要设置多少属性，可以添加一个对象；

attr和prop的区别

  1. prop添加的自定义属性在html页面上是没有的，比如index属性。
  2. 对于布尔类型的属性来说，应该使用prop；
  3. prop只能删除自定义的属性，不能删除自带的属性；
  4. 在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，应该使用prop方法。
$("input").attr("checked");     //checked
$("input").prop("checked");   //true

// 设置属性
$(':checked').prop('checked',true);
// 获取属性
$(':checked').prop('checked');// 返回true或者false

全选案例：

$("label :checkbox").click(function(){
    $("div input").prop("checked",$(this).prop("checked"))  //点击全选，让div下的所有input选项都被选中，值和全选按钮一样；
})
$("div input").click(function(){
    if($("div input:checked").length == $("div input").length){
            //如果被选中的长度和所有input的长度相等，则让全选按钮被选中；
        $("label :checkbox").prop("checked",true);
    }else{
        $("label input").prop("checked",false)
    }
})

二、类名操作

  • addClass()；添加类名，多个用空格隔开，不会去掉原有的；

  • removeClass()；删除类名，填写指定删除类名；

  • toggleClass()；有则删除，没有则添加，常用于点击事件；

  • hasClass("on")； 是否有on的类名的元素，有返回true，没有返回false，可以做为判断，判断没有就添加，判断没有就添加；

三、文本内容

  • html()； 获取文本内容，传内容为设置新内容；类似于innerHTML；

  • text()； 获取文本内容，传内容为设置新内容；类似于innerText；

  • val()； 获取input默认值；传内容设置新内容；

  • val([])；根据value值选中表单复选框或单选框；中括号填写value值来选中，

选中select时，可以直接在val框填写选中项，多选时，多个项填写到数组中；

四、css样式

.css()；

  1. 获取：填写一个参数属性名；
  2. 设置：填写属性名和属性值；
  3. 设置多个样式时，可以放到一个对象当中，

可以简写：属性值可以不加单位px，对象里属性名可以不加引号，如果有中划线不加引号需要转变驼峰；

$('div').css({width: 50, height: 50})

五、位置

  • offset(); 返回一个对象，到html的位置，和定位属性没关系；

  • offset().top/left; 取对象里面的top值和left值；

  • position(); 返回一个对象，到父元素有定位属性的距离，

  • position().top/left； 取对象里面的top值和left值

  • $(window).scrollTop()/scrollLeft() 浏览器被卷起的top值和left值；

    • 括号里面也可以设置值，到指定位置；
    • $(document)也可以，最好是window，是标准写法；

  • $(window).scroll(function(){}); 浏览器被卷起执行函数；

六、尺寸

  • width()/height(); 获取元素的宽度和高度；获取出来的没有单位px；
  • innerWidth()/innerHeight(); 宽度/高度+padding
  • outerWidth()/outerHeight(); 宽度/高度+padding+border（真实宽高）；括号里面加true，可以加上margin；
  • $(window).width()/height(); 浏览器可视宽高；
  • $(document).width()/height()；文档的真实内容宽高；

七、节点

创建

创建：$("<li>3</li>"); 创建了一个内容为3的li标签；

添加节点

  • 从后添加
    • 父元素.append(新节点)
    • 新节点.appendTo(父元素)
  • 从前添加
    • 父元素.prepend(新节点)
    • 新节点.prependTo(父元素)
  • 指定标签之后
    • a.after(b)
    • b.insertAfter(a)
  • 指定标签之前
    • a.before(b);
    • b.insertBefore(a)
  • 替换
    • a.replaceWith(b); b替换a； 替换会将内容也直接清空；
    • b.replaceAll(a); b替换a；

谁在前链式调用就是给谁添加事件；

//  谁在前调用，就是给谁设置css样式；
$("ul").append("<li></li>").css(“border","1px solid red");
$("<li></li>").appendTo($("ul")).css("border","1px solid red");

包裹节点

  • a.wrap(b) 把调用的标签包起来；
  • a.wrapAll(b) 把所有的a标签拿出来包一个父元素；
  • a.wrapInner(b) 把a标签的内容用一个父元素包起来；
  • a.unwrap() 删除包裹的父元素；

克隆节点

  • .clone(); 可以传布尔值，不传为false；
    • false：只克隆元素，不克隆脚本；
    • true：脚本一起克隆；

删除节点

  • .empty() 删除元素内容，自身保留；
  • .html('') 清空内容，会造成内存泄漏，绑定的事件不会被清除；
  • .remove() 把整个元素删除，返回被删除的元素，会将脚本删除；（即使再添加回去也没有事件）
  • .detach() 返回被删除的元素，不会删除脚本；（添加回去还有事件）

十一、筛选(方法)

  • first() 所有元素中的第一个
  • last() 所有元素中的最后一个
  • eq() 下标从0开始
  • not() 除了传入的元素
  • has() 有小括号中的元素
  • slice() 和字符串slice用法一样
  • is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true。
  • filter() 找到传入元素的元素，括号还可以是一个函数；filter(function(){return nodeType!=1}) 不是标签的节点
  • contents() 所有子节点和文本节点，一般配合filter使用

父元素相关

  • children() 直接子元素，可以传参，指定某个直接子元素

  • find() 所有子元素，传参为某个子元素

  • parent() 直接父元素

  • parents() 所有父元素可以传参，指定某个父元素

  • parentsUntil() 所有父元素直到传入的父元素，不包括传入的父元素

  • offsetParent() 找到离他最近的有定位的父元素

兄弟节点

  • next() 选择下一个相邻兄弟元素
  • nextAll() 选择下面所有的元素，小括号填写可以指定下面的某个元素（css样式选择器当中是("li~p")li下面所有的兄弟元素p）
  • nextUntil() 下面所有的兄弟元素直到小括号的元素，不包括小括号
  • prev() 上一个兄弟元素
  • prevAll() 上面所有的兄弟元素，小括号传参表示指定元素
  • prevUntil() 上面所有的兄弟元素直接小括号的元素，不包括小括号
  • siblings() 所有兄弟元素，可以传一个具体的标签，指定某些兄弟元素
// 使用contents作childNodes使用；
$("span:contains(改)").click(function(){
    var val = prompt("请输入一要添加的内容")
    $("div").contents().filter(function(){return this.nodeType!=1})[0].nodeValue = val;
    console.log(val);
})

十二、自定义动画

.animate(); 参数是：对象，时间，函数；

$('div').animate({'opacity': 1}, 200, function(){
    console.log('动画完成')
})

让浏览器的scroll滚动条慢慢回到0

$("html,body").animate({"scrollTop":0});

写html和body是兼容；相当于：document.documentElement || document.body；

高频面试题

● $().attr 与 $().prop() 的区别 ?